<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>北京科技报</title>
	<link href="css/common.css" rel="stylesheet" />
	<link href="css/public.css" rel="stylesheet" />
	<link href="css/header.css" rel="stylesheet" />
	<link href="css/list.css" rel="stylesheet" />
	<link href="css/bookstarp.css" rel="stylesheet" />
	<link href="css/swiper.css" rel="stylesheet" />
	<link href="css/iview.css" rel="stylesheet" />
	<script src="js/swiper.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/iview.js"></script>
</head>

<body>
	<div class="header_box" id="header_vue">
		<div class="header flex justify-between align-end">
			<div class="flex justify-start align-end">
				<img class="logo" src="images/logoff.png" />
				<div class="color-ff sub_title">聚焦科学传播 弘扬科学精神</div>
			</div>
			<div class="flex justify-end align-end header_right">
				<div class="search_box">
					<input class="search_input" type="text" placeholder="请输入关键字搜索" />
					<img class="search_icon" src="images/home/search_icon.png" />
				</div>
				<div class="app_box">
					<img style="height: 36px" src="images/home/app_icon.png" />
					<div class="font-12 color-ff margin-top-10" style="height: 20px">
						APP下载
					</div>
					<div class="app-container">
						<div class="app-img-box">
							<img class="app-img" :src="qrCode" alt="QR Code" />
							<img class="app-logo" src="images/home/app_icon.png" alt="Logo" />
						</div>
						<div class="text-center margin-top-8 font-13">
							扫码分享当前页面
						</div>
					</div>
				</div>
				<div class="jz_box">
					<img style="height: 36px" src="images/home/jz_icon.png" />
					<div class="font-12 color-ff margin-top-10" style="height: 20px">
						融媒矩阵
					</div>
					<div class="jz-container">
						<ul>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/zh.png" alt="" />
								<div class="margin-left-14 font-16 text-left jz-li-text">
									北京科技报知乎
								</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/wx.png" alt="" />
								<div class="margin-left-14 font-16 text-left jz-li-text">
									北京科技报微信
								</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/tt.png" alt="" />
								<div class="margin-left-14 font-16 text-left jz-li-text">
									北京科技报头条
								</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/dy.png" alt="" />
								<div class="margin-left-14 font-16 text-left jz-li-text">
									北京科技报抖音
								</div>
							</li>
							<li class="flex justify-start align-center jz-li">
								<img class="jz-li-img" src="images/header/wb.png" alt="" />
								<div class="margin-left-14 font-16 text-left jz-li-text">
									北京科技报微博
								</div>
							</li>
						</ul>
						<div class="jz-img-box">
							<img class="jz-img" :src="qrCode" alt="QR Code" />
							<img class="jz-logo" src="images/home/app_icon.png" alt="Logo" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="header_slider_box">
			<div class="flex justify-between header_slider">
				<div v-for="(item,index) in sliderList" v-bind:key="index">
					<div v-if="!item.expand" class="slider_item">
						<a :class="item.sort == 1? 'active': ''" href="">{{ item.title }}</a>
						<div v-if="item.sort == 1" class="slider_line"></div>
					</div>
					<div v-else class="slider_item" v-on:click.stop="handleExpandSubSlider(item.sort)">
						<a class="flex align-center">
							<div>{{ item.title }}</div>
							<img class="slider_item_expand"
								v-bind:class="{'slider_item_retract':page_number == item.sort}" src="images/down.png" />
						</a>
						<div class="sub_slider_box" :class="page_number == item.sort? 'disBlock': ''">
							<div v-for="(sub,num) in item.subSlider" v-bind:key="num" class="sub_slider">
								<a href="">{{ sub.title }}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="listPage" class="flex justify-between list_box">
		<div class="page_left">
			<div class="route_path">
				<div class="route_path_name">
					<span>当前位置：</span>
					<span>首页</span>
					<span>＞</span>
					<span class="color-main">热点解读</span>
				</div>
				<div class="flex align-center bg-ff">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div id="swiper-main-container" class="swiper-container swiper-main-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img class="banner_main_img" src="images/list/banner-1-1.jpg" />
						<div class="custom-pagination-title">
							<div class="font-16 color-ff ellipsis custom-pagination-text">
								2024年“世界地球日”系列活动之“自然资源科普小讲师系列活动之“自然资源科普小讲师系列活动之“自然资源科普小讲师系列活动之“自然资源科普小讲师系列活动之“自然资源科普小讲师系列活动之“自然资源科普小讲师”
							</div>
						</div>
					</div>
				</div>

				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>

				<!-- Add Pagination -->
				<div class="swiper-pagination" style="padding-bottom: 8px;"></div>
			</div>
			<div class="page_list_box">
				<div v-if="loadData.length">
					<div v-for="(item, index) in loadData" v-bind:key="index">
						<div class="flex justify-start margin-top-30">
							<div class="page_style_one_box">
								<img class="page_style_one_img" :src="item.img" alt="" />
							</div>
							<div class="page_style_one_text" style="border-bottom: 1px solid #d1d1d1">
								<div class="page_style_one_title ellipsis">
									{{ item.title }}
								</div>
								<div class="page_style_one_content text_ellipsis_3">
									{{ item.content }}
								</div>
								<div class="page_style_one_date" style="margin-bottom: 30px">
									{{ item.date }}
									<span style="margin-left: 10px">{{ item.remark }}</span>
								</div>
							</div>
						</div>
						<div v-if="index == 4" id="swiper-ad-container" class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<img class="banner_ad_img" src="images/home/banner-1-1.jpg" />
								</div>
								<div class="swiper-slide">
									<img class="banner_ad_img" src="images/home/banner-1-1.jpg" />
								</div>
							</div>
						</div>
					</div>
<!--					<div>-->
<!--						<div class="flex justify-start margin-top-30">-->
<!--					                                播放按钮-->
<!--							<div style="position: relative;height: 122px;">-->
<!--								<div class="page_style_one_box">-->
<!--									<img class="page_style_one_img" src="images/home/hotspot_left_img.jpg" alt="" />-->
<!--								</div>-->
<!--								<img class="video_play_img" src="images/live/play.png" alt="">-->
<!--							</div>-->
<!--							<div class="page_style_one_text" style="border-bottom: 1px solid #d1d1d1">-->
<!--								<div class="flex">-->
<!--									<div class="flex" style="margin-top: 3px">-->
<!--										<div class="flex align-center justify-center margin-right-10 live_box ">-->
<!--											<img src="images/ing.png" />-->
<!--											<div class="font-12">正在直播</div>-->
<!--										</div>-->
<!--									</div>-->
<!--									<div class="page_style_one_title ellipsis">-->
<!--										北京城市学院科协与门头沟区科协合作开展特色科普活动展特色科普活动展特色科普活动展特色科普活动-->
<!--									</div>-->
<!--								</div>-->
<!--								<div class="page_style_one_content text_ellipsis_3">-->
<!--									由北京市科协主办，北京科技记协承办，中关村创新研修学院、天云融创数据科技（北京）有限公司协办的AI为进一步提升区域公民科学素质，发挥高校在推动科学技术创新、促进教育事业发展中的积极作用，近日，在北京市科学技术协会指导下，在北京市科学技术协会指导下，在北京市科学技术协会指导下-->
<!--								</div>-->
<!--								<div class="page_style_one_date" style="margin-bottom: 30px">-->
<!--									<span>2024/05/01</span>-->
<!--									<span style="margin-left: 10px">科普中央厨房</span>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--					<div>-->
<!--						<div class="flex justify-start margin-top-30">-->
<!--							<div class="page_style_one_box">-->
<!--								<img class="page_style_one_img" src="images/home/hotspot_left_img.jpg" alt="" />-->
<!--							</div>-->
<!--							<div class="page_style_one_text" style="border-bottom: 1px solid #d1d1d1">-->
<!--								<div class="flex">-->
<!--									<div class="page_style_one_title ellipsis">-->
<!--										北京城市学院科协与门头沟区科协合作开展特色科普活动展特色科普活动展特色科普活动展特色科普活动-->
<!--									</div>-->
<!--								</div>-->
<!--								<div class="page_style_one_content text_ellipsis_3">-->
<!--									由北京市科协主办，北京科技记协承办，中关村创新研修学院、天云融创数据科技（北京）有限公司协办的AI为进一步提升区域公民科学素质，发挥高校在推动科学技术创新、促进教育事业发展中的积极作用，近日，在北京市科学技术协会指导下，在北京市科学技术协会指导下，在北京市科学技术协会指导下-->
<!--								</div>-->
<!--								<div class="page_style_one_date" style="margin-bottom: 30px">-->
<!--                                    <span class="font-12 order_box">-->
<!--                                        <span>直播预告</span>-->
<!--                                        <span>07/28</span>-->
<!--                                        <span>10:00</span>-->
<!--                                    </span>-->
<!--									<span style="margin-left: 10px">科普中央厨房</span>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--					<div>-->
<!--						<div class="flex justify-start margin-top-30">-->
<!--							<div class="page_style_one_box">-->
<!--								<img class="page_style_one_img" src="images/home/hotspot_left_img.jpg" alt="" />-->
<!--							</div>-->
<!--							<div class="page_style_one_text" style="border-bottom: 1px solid #d1d1d1">-->
<!--								<div class="flex">-->
<!--									<div class="flex" style="margin-top: 3px">-->
<!--										<div class="margin-right-10 font-12 special_recom_content_img">-->
<!--											专题-->
<!--										</div>-->
<!--									</div>-->
<!--									<div class="page_style_one_title ellipsis">-->
<!--										北京城市学院科协与门头沟区科协合作开展特色科普活动展特色科普活动展特色科普活动展特色科普活动-->
<!--									</div>-->
<!--								</div>-->
<!--								<div class="page_style_one_content text_ellipsis_3">-->
<!--									由北京市科协主办，北京科技记协承办，中关村创新研修学院、天云融创数据科技（北京）有限公司协办的AI为进一步提升区域公民科学素质，发挥高校在推动科学技术创新、促进教育事业发展中的积极作用，近日，在北京市科学技术协会指导下，在北京市科学技术协会指导下，在北京市科学技术协会指导下-->
<!--								</div>-->
<!--								<div class="page_style_one_date" style="margin-bottom: 30px">-->
<!--									<span>2024/05/01</span>-->
<!--									<span style="margin-left: 10px">科普中央厨房</span>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
					<Page class="pagination-box" :total="total" @on-change="onPageChange" />
				</div>
				<div v-else class="no_content">
					<img src="images/none.png" alt="">
					<div class="font-18 text-center margin-top-20 no_text">暂无内容</div>
				</div>
			</div>
		</div>
		<div class="page_right">
			<div id="swiper-poster-container" class="swiper-container swiper-poster-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide" v-for="item in posterList" :key="item.id">
						<img class="banner_poster_img" :src="item.imgUrl" />
					</div>
				</div>

				<!-- Add Arrows -->
				<div class="swiper-button-next swiper-button-white"></div>
				<div class="swiper-button-prev swiper-button-white"></div>

				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
			<div class="poster_base">
				<span class="text_ellipsis">{{posterList[swiperactiveIndex]?.title}}</span>
				<div class="triangle_left"></div>
				<div class="triangle_right"></div>
			</div>
			<div class="detail_model_header" style="margin-top: 30px">
				<div class="flex justify-between align-center">
					<div class="font-24 color-main">要闻关注</div>
					<div class="flex justify-end align-center detail_model_header_right">
						<a class="detail_model_header_more_text">更多</a>
						<img class="detail_model_header_more_img" src="images/home/more.png" alt="" />
					</div>
				</div>
				<div class="flex align-center bg-ff">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div v-for="(item, index) in newsData" v-bind:key="index">
				<div class="flex justify-start margin-top-30">
					<div class="page_style_two_box">
						<img class="page_style_two_img" :src="item.img" alt="" />
					</div>
					<div class="page_style_two_text">
						<div class="page_style_two_title text_ellipsis_2">
							{{ item.title }}
						</div>
						<div class="page_style_two_date">
							{{ item.date }}
							<span style="margin-left: 10px">{{ item.remark }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="detail_model_header" style="margin-top: 30px">
				<div class="flex justify-between align-center">
					<div class="font-24 color-main">推荐阅读</div>
					<div class="flex justify-end align-center detail_model_header_right">
						<a class="detail_model_header_more_text">更多</a>
						<img class="detail_model_header_more_img" src="images/home/more.png" alt="" />
					</div>
				</div>
				<div class="flex align-center bg-ff">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div v-for="(item, index) in recommendData" v-bind:key="index">
				<div class="flex justify-start margin-top-30">
					<div class="page_style_two_box">
						<img class="page_style_two_img" :src="item.img" alt="" />
					</div>
					<div class="page_style_two_text">
						<div class="page_style_two_title text_ellipsis_2">
							{{ item.title }}
						</div>
						<div class="page_style_two_date">
							{{ item.date }}
							<span style="margin-left: 10px">{{ item.remark }}</span>
						</div>
					</div>
				</div>
			</div>
			<div id="swiper-bottom-container" class="margin-bottom-30 swiper-container"
				style="width: 100%; margin-top: 80px">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img class="banner_bottom_img" src="images/list/banner-1-2.jpg" />
					</div>
					<div class="swiper-slide">
						<img class="banner_bottom_img" src="images/list/banner-1-2.jpg" />
					</div>
				</div>
			</div>
		</div>
	</div>
	<iframe style="width: 100%; height: 237px; border: none; overflow: hidden" src="footer.html"
		frameborder="0"></iframe>
</body>

</html>
<script src="js/header.js"></script>
<script src="js/list.js"></script>
